<template>
  <div>
    <!-- 标题栏 -->
    <div class="header">
      <img src="@/assets/images/back.png" @click="back">
      <span>浏览历史</span>
      <span />
    </div>
    <div ref="container" class="nav-content">
      <!-- 在新闻列表中引入无限滚动加载功能 -->
      <div ref="scroll" v-infinite-scroll="load" class="news-list">
        <div
          v-for="(item, index) in data"
          :key="index"
          class="section"
          @click="toNews(index)"
        >
          <div class="news">
            <div class="news-left">
              <img :src="item.histroy.pic" alt="">
            </div>
            <div class="news-right">
              <div class="newsTitle">{{ item.histroy.title }}</div>
              <div class="newsMessage">
                <span>{{ item.histroy.time }}</span>
                <span>{{ item.histroy.src }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'List',
  beforeRouteLeave(to, from, next) {
    this.scroll = this.$refs.scroll.scrollTop
    next()
  },
  data() {
    return {
      data: [],
      scrollTop: 0,
      currentPage: 0
    }
  },
  computed: {
    histroy() {
      return this.$store.state.my.histroy
    }
  },
  activated() {
    this.$refs.scroll.scrollTop = this.scroll
  },
  methods: {
    // 获取下一页历史
    load() {
      // 判断当前已加载多少页
      console.log('currentPage', this.currentPage)
      const totalPage = Math.floor(this.$store.state.my.histroy.length / this.$store.state.news.num)
      console.log('totalPage', totalPage)
      if (this.currentPage <= totalPage) {
        // 当前加载的起始位置
        const start = this.currentPage * this.$store.state.news.num
        // 结束位置
        let end = start + this.$store.state.news.num
        // 如果剩余未加载的条数小于固定加载条数，则取剩余条数
        const banlance = this.histroy.length - this.currentPage * this.$store.state.news.num
        if (banlance < this.$store.state.news.num) {
          end = start + banlance
        }
        console.log(start)
        console.log(end)
        for (let i = start; i < end; i++) { this.data.push(this.histroy[i]) }
        console.log(this.data)
        this.currentPage++
      }
    },
    // 打开新闻阅读
    toNews(index) {
      // 打开明细
      this.$store.commit('SET_NEWS_INDEX', index)
      this.$router.push('/news')
    },
    back() {
      this.$router.back()
    }
  }

}
</script>

<style lang="scss"  scoped>
.header {
  width: 100%;
  height: 1.33rem;
  background-color: #d43d3d;
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 3px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: fixed;
  top: 0;
}
.header img {
    width: 0.67rem;
    height: 0.67rem;
    cursor: pointer;
}

.nav-content {
  margin-top: 1.4rem;
}

.news-list {
  position: relative;
  height:calc(100vh - 1.4rem - 49px);
  overflow-y:auto;
  width: 100%;
}

.section {
  width: 100%;
  height: 2.5rem;
  border-bottom: 1px solid #ccc;
}

.news {
  height: 2.25rem;
  box-sizing: border-box;
  margin: 10px 10px;
  display: flex;
}
.news-left {
  height: 100%;
  width: 2.8rem;
  display: inline-block;
}
.news-left img {
  width: 100%;
  height: 100%;
}
.news-right {
  flex: 1;
  padding-left: 10px;
}
.newsTitle {
  width: 100%;
  height: 62%;
  color: #404040;
  font-size: 17px;
  overflow: hidden;
}
.newsMessage {
  width: 100%;
  height: 38%;
  display: flex;
  align-items: flex-end;
  color: #888;
  justify-content: space-between;
}
.load {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
 .loading-more {
  margin-top: 5px;
  width: 100%;
  height: 20px;
  text-align: center;
 }
</style>
